<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/decorators/taglibs.jsp"%>
<div id="main">
<div class="w2">會期維護 » 議案基本資料維護 </div>
	<div><h2><b>會期：${newMotion.session.sessionNo }</b></h2></div>
	<c:forEach items="${motionForm.motions}" var="motion" varStatus="status">
	<div id="block${status.index}" style="margin:20px 5px 50px 5px" >
	<form:form modelAttribute="motionForm" id="motionForm${status.index}" >
		<form:hidden id="motionSeq${status.index}" path="motions[${status.index}].motionSeq"  />
		<form:hidden id="sessionNo${status.index}" path="motions[${status.index}].sessionNo" value="${motion.session.sessionNo}"  />
	<table width="100%" border="1" >
		<tr>
			<td width="8%" align="left"><font color="red" ><b>案別：</b></font>
			<form:input id="typeNo${status.index}"  path="motions[${status.index}].typeNo" class="easyui-combobox" style="width:40px;"
				data-options="
                url: '${appPath}/codeType/findAll.json',
                method: 'get',
                valueField: 'code',
                textField: 'code',
                panelWidth: 100,
                panelHeight: 'auto',
                formatter: formatType,
                keyHandler: myKeyHandlerI,
                onSelect: function(rec){ 
		            $('#type${status.index}').val(rec.name);
		        }
            "
			/>
			<form:input id="type${status.index}" path="motions[${status.index}].type"  style="width:70px;" readonly="true"/>
			</td>
			<td width="5%" align="left"><font color="red" ><b>案次：</b></font><form:input id="order${status.index}" path="motions[${status.index}].motionOrder"  maxlength="2" style="width:20px;"/></td>
			<td width="5%" align="left">臨時：<form:checkbox id="provision${status.index}" path="motions[${status.index}].provisional"  ></form:checkbox></td>
			<td width="15%" align="left">提案單位：
			<form:input id="unitCode${status.index}" path="motions[${status.index}].unitCode" class="easyui-combobox" style="width:40px;"
				data-options="
                url: '${appPath}/codeUnit/findAll.json',
                method: 'get',
                valueField: 'code',
                textField: 'code',
                panelWidth: 180,
                panelHeight: 'auto',
                formatter: formatType,
                keyHandler: myKeyHandlerI,
                onSelect: function(rec){
		            $('#unitName${status.index}').val(rec.name);
		        }
            "
			/>
			<form:input id="unitName${status.index}" path="motions[${status.index}].unitName"  style="width:120px;" readonly="true"/></td>
			<td width="15%" align="left">承辦：
				<form:input id="telNo${status.index}" path="motions[${status.index}].telNo"  class="easyui-combobox" style="width:60px;"
					data-options="
	                url: '${appPath}/inCharge/findAll.json',
	                method: 'get',
	                valueField: 'name',
	                textField: 'telNo',
	                panelWidth: 250,
	                panelHeight: 'auto',
	                formatter: formatIC,
	                keyHandler: myKeyHandlerII,
	                onSelect: function(rec){
			            $('#inCharge${status.index}').val(rec.name);
			            $('#sectionChief${status.index}').val(rec.sectionChief);
			        }
	            "
				/>
				<form:input id="inCharge${status.index}" path="motions[${status.index}].inCharge"  style="width:60px;" />
				<form:input id="sectionChief${status.index}" path="motions[${status.index}].sectionChief" style="width:60px;" />
			</td>
		</tr>  
	</table>
	<table width="100%" border="1" >
		<tr>
			<td valign="top" width="5%" rowspan="2"><font color="red" ><b>案由：</b></font></td>
			<td width="35%" rowspan="2">
				<form:input id="cause${status.index }" path="motions[${status.index}].cause" class="easyui-combobox" 
					style="width:500px;height:60px"
					data-options="
					url:'${appPath}/codeCause/find.json',
                    method:'get',
                    valueField:'name',
                    textField:'name',
                    multiline:true"  
				/>
			</td>
			<td  colspan="2">
				收文日期：<form:input id="rDate${status.index}" path="motions[${status.index}].date1" class="easyui-datebox" style="width:120px;"/>
			</td>
			<td  colspan="2">
				到議事科日期：<form:input id="nDate${status.index}" path="motions[${status.index}].date2" class="easyui-datebox" style="width:120px;"/>
			</td>
		</tr>
		<tr>
			<td colspan="4">是否違法 罰鍰額度 其他處分：<form:input id="isLegal${status.index}" path="motions[${status.index}].isLegal" style="width:300px;"/></td>
		</tr>
		<tr>	
			<td align="left" valign="top" width="8%" rowspan="2">審查委員：</td>
			<td width="40%" rowspan="2">
				<form:input id="examinant${status.index}" path="motions[${status.index}].examinant" class="easyui-combobox" 
					style="width:400px;height:60px"
					data-options="
					url:'${appPath}/committee/findCkd.json',
				    method:'get',
				    valueField:'code',
				    textField:'name',
				    multiline:true,
				    multiple:true,
				    keyHandler: myKeyHandler,
				    onBeforeLoad: function(){
				    	$('#examinant${status.index}').combobox('setValues',this.value.split(','))
				    },
				    "
				/></td>
			<td width="10%" align="right">原提案單位一：</td>
			<td width="15%" >
				<form:input id="unit1Code${status.index}" path="motions[${status.index}].unitCode1" name="unitCode1" class="easyui-combobox" style="width:40px;"
					data-options="
	                url: '${appPath}/codeUnit/findAll.json',
	                method: 'get',
	                valueField: 'code',
	                textField: 'code',
	                panelWidth: 180,
	                panelHeight: 'auto',
	                formatter: formatType,
	                keyHandler: myKeyHandlerI,
	                onSelect: function(rec){
			            $('#unit1Name${status.index}').val(rec.name);
			        }
	            "
				/>
			<form:input id="unit1Name${status.index}" path="motions[${status.index}].unitName1" name="unitName1" style="width:120px;" readonly="true"/>
			</td>
			<td width="8%" align="right">原承辦一：</td>
			<td width="20%">
				<form:input id="tel1No${status.index}" path="motions[${status.index}].telNo1" name="telNo1" class="easyui-combobox" style="width:60px;"
					data-options="
	                url: '${appPath}/inCharge/findAll.json',
	                method: 'get',
	                valueField: 'telNo',
	                textField: 'telNo',
	                panelWidth: 250,
	                panelHeight: 'auto',
	                formatter: formatIC,
	                keyHandler: myKeyHandlerII,
	                onSelect: function(rec){
			            $('#in1Charge${status.index}').val(rec.name);
			            $('#section1Chief${status.index}').val(rec.sectionChief);
			        }
	            "
				/>
				<form:input id="in1Charge${status.index}" path="motions[${status.index}].inCharge1" name="inCharge1"  style="width:60px;" />
				<form:input id="section1Chief${status.index}" path="motions[${status.index}].sectionChief1" name="sectionChief1" style="width:60px;" />
			</td>
		</tr>
		<tr>	
			<td width="10%" align="right">原提案單位二：</td>
			<td width="15%" >
				<form:input id="unit2Code${status.index}" path="motions[${status.index}].unitCode2" name="unitCode2" class="easyui-combobox" style="width:40px;"
					data-options="
	                url: '${appPath}/codeUnit/findAll.json',
	                method: 'get',
	                valueField: 'code',
	                textField: 'code',
	                panelWidth: 180,
	                panelHeight: 'auto',
	                formatter: formatType,
	                keyHandler: myKeyHandlerI,
	                onSelect: function(rec){
			            $('#unit2Name${status.index}').val(rec.name);
			        }
	            "
				/>
			<form:input id="unit2Name${status.index}" path="motions[${status.index}].unitName2" name="unitName2" style="width:120px;" readonly="true"/>
			</td>
			<td width="8%" align="right">原承辦二：</td>
			<td width="20%">
				<form:input id="tel2No${status.index}" path="motions[${status.index}].telNo2" name="telNo2" class="easyui-combobox" style="width:60px;"
					data-options="
	                url: '${appPath}/inCharge/findAll.json',
	                method: 'get',
	                valueField: 'telNo',
	                textField: 'telNo',
	                panelWidth: 250,
	                panelHeight: 'auto',
	                formatter: formatIC,
	                keyHandler: myKeyHandlerII,
	                onSelect: function(rec){
			            $('#in2Charge${status.index}').val(rec.name);
			            $('#section2Chief${status.index}').val(rec.sectionChief);
			        }
	            "
				/>
				<form:input id="in2Charge${status.index}" path="motions[${status.index}].inCharge2" name="inCharge2"  style="width:60px;" />
				<form:input id="section2Chief${status.index}" path="motions[${status.index}].sectionChief2" name="sectionChief2" style="width:60px;" />
			</td>
		</tr>
	</table>
	<div align="right">
		<font id="hid${status.index}" color="red" size="4">更新成功</font>
		<a href="#do" class="easyui-linkbutton" onClick="save(${status.index});">存檔</a>
		<a href="#do" class="easyui-linkbutton" onClick="remove($('#block${status.index}'),'${motion.motionSeq }');">刪除</a>
		<a href="#do" class="easyui-linkbutton" onClick="clone(${status.index});">複製</a>
	</div>
	
	<hr size="2" style="margin:20px"/>
	</form:form>
	</div>
	</c:forEach>

</div>

<!-- ========================================================================================= -->

<div id="block" style="margin:50px 5px 50px 5px;display:none;" >
	<form name="newForm" id="motionForm">
		<input type="hidden" id="motionSeq" name="motionSeq"  />
		<input type="hidden" id="sessionNo" name="sessionNo" value="${motion.session.sessionNo}"  />
	<table width="100%" border="1" >
		<tr>
			<td width="8%" align="left"><font color="red"><b>案別：</b></font>
				<input id="typeNo" name="typeNo" style="width:40px;"/>
				<input id="type" name="type" style="width:70px;" readonly="readonly"/>
			</td>
			<td width="5%" align="left"><font color="red"><b>案次：</b></font><input id="motionOrder" name="motionOrder" maxlength="2" style="width:20px;"/></td>
			<td width="5%" align="left">臨時：<input type="checkbox" id="provisional" name="provisional" /></td>
			<td width="15%" align="left">提案單位：
			<input id="unitCode" name="unitCode" style="width:40px;"/>
			<input id="unitName" name="unitName" style="width:120px;" readonly="readonly"/></td>
			<td width="15%" align="left">承辦：
				<input id="telNo" name="telNo" style="width:60px;"/>
				<input id="inCharge" name="inCharge" style="width:60px;"/>
				<input id="sectionChief" name="sectionChief" style="width:60px;" "/>
			</td>
		</tr>  
	</table>
	<table width="100%" border="1" >
		<tr>
			<td valign="top" width="5%" rowspan="2"><font color="red"><b>案由：</b></font></td>
			<td width="35%" rowspan="2">
				<input id="cause" name="cause" style="width:500px;height:60px"/>
			</td>
			<td colspan="2">
				收文日期：<input id="rDate" name="date1" style="width:120px;"/>
			</td>
			<td colspan="2">
				到議事科日期：<input id="nDate" name="date2" style="width:120px;"/>
			</td>
		</tr>
		<tr>
			<td colspan="4">是否違法 罰鍰額度 其他處分：<input id="isLegal" name="isLegal" style="width:300px;"/></td>
		</tr>
		<tr>
			<td align="left" valign="top" width="8%" rowspan="2">審查委員：</td>
			<td width="40%" rowspan="2"><input id="examinant" name="examinant" style="width:400px;height:60px" /></td>
			<td width="10%" align="left">原提案單位一：</td>
			<td width="15%" >
				<input id="unit1Code" name="unitCode1" style="width:40px;"/>
				<input id="unit1Name" name="unitName1" style="width:120px;" readonly="readonly"/>
			</td>
			<td width="8%" align="left">原承辦一：</td>
			<td width="20%">
				<input id="tel1No" name="telNo1" style="width:60px;"/>
				<input id="in1Charge" name="inCharge1"  style="width:60px;" />
				<input id="section1Chief" name="sectionChief1" style="width:60px;" />
			</td>
			
		</tr>
		<tr>
			<td align="left">原提案單位二：</td>
			<td>
				<input id="unit2Code" name="unitCode2" style="width:40px;"/>
				<input id="unit2Name" name="unitName2" style="width:120px;" readonly="readonly"/>
			</td>
			<td align="left">原承辦二：</td>
			<td>
				<input id="tel2No" name="telNo2" style="width:60px;"/>
				<input id="in2Charge" name="inCharge2" style="width:60px;" />
				<input id="section2Chief" name="sectionChief2" style="width:60px;"/>
			</td>
		</tr>
	</table>
	<div align="right">
		<font id="hid" color="red" size="4">更新成功</font>
	</div>
	 
	<hr size="2" style="margin:20px"/>
	</form>
	</div>


<script type="text/javascript">
/* 鍵盤輸入時，選單不下拉 */
var myKeyHandler = $.extend({},$.fn.combobox.defaults.keyHandler,{
    query:function(q){
    	$(this).combo('hidePanel');
    }
});
var myKeyHandlerI = $.extend({},$.fn.combobox.defaults.keyHandler,{
	enter: function(e){
		var id = $(this).attr('id');
		console.log($(this).attr('id'));
		console.log($('#'+id+' ~ input').val());
		var value = $(this).combo('getValue');
		if(value == undefined){
			 console.log(value);
		}else{
			var data = $(this).combobox('getData');
			for(var i=0; i<data.length; i++){
				if(data[i].code ==value){
					$($('#'+id+' ~ input')).val(data[i].name);
				}
            }
	        $(this).combo('hidePanel');
		}
    }
});
var myKeyHandlerII = $.extend({},$.fn.combobox.defaults.keyHandler,{
	enter: function(e){
		var id = $(this).attr('id');
		console.log($(this).attr('id'));
		console.log($('#'+id+' ~ input').val());
		console.log($('#'+id+' ~ input ~ input').val());
		var value = $(this).combo('getValue');
		var text = $(this).combo('getText');
		if(text == undefined){
		}else{
			var data = $(this).combobox('getData');
			console.log(" text:"+text);
			for(var i=0; i<data.length; i++){
				console.log("data name:"+data[i].name);
				if(data[i].name==value&&data[i].telNo ==text){
					$($('#'+id+' ~ input')).val(data[i].name);
			        $('#'+id+' ~ input ~ input').val(data[i].sectionChief);
				}
            }
	        $(this).combo('hidePanel');
		}
    }
});
var myKeyHandlerIII = $.extend({},$.fn.combobox.defaults.keyHandler,{
	enter: function(e){
		var id = $(this).attr('id');
		console.log($(this).attr('id'));
		console.log($('#'+id+' ~ input').val());
		var value = $(this).combo('getValue');
		if(value == undefined){
			 console.log(value);
		}else{
			var data = $(this).combobox('getData');
			for(var i=0; i<data.length; i++){
				if(data[i].code ==value){
					$($('#'+id+' ~ input')).val(data[i].name);
					add();
				}
            }
	        $(this).combo('hidePanel');
		}
    }
});
$().ready(function() { 
	$( "font[id*='hid']" ).hide();
	$( "div#main input[id*='cause']" ).combobox({
	    keyHandler: myKeyHandler
	});
	add();
});	
function add(){
	var num = $("div#main div[id*='block']").length;
	var row = $("#block").clone().attr("id","block"+num).show();
	$( "div#main" ).append(row);
	$.map($("div#block"+num+" input"), function(n, i){
		if(n.id!=""){
			$("div#block"+num+" input#"+n.id).attr("id",n.id+num);
		}
	});
	$("div#block"+num+" > form#motionForm").attr("id", "motionForm"+num);
	$("div#block"+num+" input[name='sessionNo']").val('${newMotion.session.sessionNo}');
	$("div#block"+num+" font#hid").attr("id","hid"+num)
		.after("<a href=\"#do\" id=\"clone"+num+"\" class=\"easyui-linkbutton\" onClick=\"clone('"+num+"');\">複製</a>")
		.after("<a href=\"#do\" id=\"btn"+num+"\" class=\"easyui-linkbutton\" onClick=\"save('"+num+"');\">存檔</a>&nbsp;");
	
	setBtn(num);
	setType(num,"");
	setUnit("",num,"");
	setUnit("1",num,"");
	setUnit("2",num,"");
	setDate("r",num,"");
	setDate("n",num,"");
	setCharge("",num,"");
	setCharge("1",num,"");
	setCharge("2",num,"");
	setCause(num,"");
	setExaminant(num,"");
}
function clone(num){
	var totalnum = $("div#main div[id*='block']").length-1;
	$.each($("#motionForm"+num).serializeArray(), function(i, v) { 
		var dot = v.name.lastIndexOf(".");
		var name = v.name.substr(dot+1);
		//alert(name+"   "+v.value);
		$("div#block"+totalnum+" input[name='"+name+"']").val(v.value);
		//$("div#block"+totalnum+" input[id*='"+name+"']").val(v.value);
	});
	$("div#block"+totalnum+" input[id*='motionSeq']").val("");
	setBtn(totalnum);
	setType(totalnum,$("div#block"+num+" input[id*='typeNo']").val());
	setUnit("",totalnum,$("div#block"+num+" input[id*='unitCode']").val());
	setUnit("1",totalnum,$("div#block"+num+" input[id*='unit1Code']").val());
	setUnit("2",totalnum,$("div#block"+num+" input[id*='unit2Code']").val());
	setDate("r",totalnum,$("div#block"+num+" input[id*='rDate']").val());
	setDate("n",totalnum,$("div#block"+num+" input[id*='nDate']").val());
	setCharge("",totalnum,$("div#block"+num+" input[id*='telNo']").val());
	setCharge("1",totalnum,$("div#block"+num+" input[id*='tel1No']").val());
	setCharge("2",totalnum,$("div#block"+num+" input[id*='tel2No']").val());
	setCause(totalnum,$("div#block"+num+" input[id*='cause']").val());
	setExaminant(totalnum,$("div#block"+num+" input[id*='examinant']").val());
	add();
}
function runEffect(id) {
    $( "#hid"+id ).show( "highlight", {}, 500, function(){
    	setTimeout(function() {
   		   $( "#hid"+id+":visible" ).fadeOut();
   		 }, 1500 );
    } );
};
function save( num ){
	if($("#typeNo"+num).combobox('getValue')==""){
		alert("案別不可為空!");
		return;
	}
	var o = {};
	$.each($("#motionForm"+num).serializeArray(), function(i, v) { 
		var dot = v.name.lastIndexOf(".");
		var name = v.name.substr(dot+1);
		if(name=="provisional"){
			o[name] = (o[name]==false); 
		}  else{
			o[name] = v.value;
		}
	});
	 o["examinant"] = $("div#block"+num+" input#examinant"+num).combobox("getValues").join(",").replace(/^,/,"");
	 o["cause"] = $("div#block"+num+" input#cause"+num).combobox('getText');
	$.post( "${appPath}/motion/update.json",o, 
		function( data ) {
			if (data=="false") {
				alert("更新失敗!");
			} else{     
				if(data!="update"){
					$("#motionSeq"+num).val(data);
					$("div#block"+num+" a#btn"+num)
					.after("&nbsp;<a href=\"#do\" id=\"del"+num+"\" class=\"easyui-linkbutton\" onClick=\"del($('#block"+num+"'),"+data+");\">刪除</a>");
					$("div#block"+num+" a#del"+num).linkbutton();	
				}
				runEffect(num);
			}
		}
	,"text"
	);
	
}
function remove( divid ,motionSeq){
	$.messager.confirm("Confirm","確定刪除?",function(r){
        if (r){
            $.post("${appPath}/motion/delete/"+motionSeq+".json", 
       			function(data) {
            		console.log(data);
       				if (eval(data)) {
       					divid.remove();
       				} else {
       					alert("刪除失敗!");
       				}
       		});
        };
    }); 
};

function formatType(row){
	return "<span style='font-weight:bold'>" + row.code +": "+ row.name +"</span><br/>"; 
}
function formatIC(row){
	return "<span style='font-weight:bold'>" + row.telNo +" 承辦:"+ row.name +" 科長:"+ row.sectionChief +"</span><br/>"; 
}


function setBtn(num){
	$("div#block"+num+" a#btn"+num).linkbutton();
	$("div#block"+num+" a#clone"+num).linkbutton();
}
function setType(num,value){
	$("div#block"+num+" input#typeNo"+num).combobox({
    	url: '${appPath}/codeType/findAll.json',
           method: 'get',
           valueField: 'code',
           textField: 'code',
           panelWidth: 100,
           panelHeight: 'auto',
           formatter: formatType,
           keyHandler: myKeyHandlerIII,
           onSelect: function(rec){
			var rowNum = $("div#main div[id*='block']").length-1;
            $("div#block"+num+" input#type"+num).val(rec.name);
           	if(rec.code!=''&&rowNum==num){
           		add();
           	}
        }
	})
	if(value!=undefined&&value!=""){
		$("div#block"+num+" input#typeNo"+num).combobox("setValue",value);
	}
}
function setUnit(code,num,value){
	$("div#block"+num+" input#unit"+code+"Code"+num).combobox({
    	url: '${appPath}/codeUnit/findAll.json',
        method: 'get',
        valueField: 'code',
        textField: 'code',
        panelWidth: 180,
        panelHeight: 'auto',
        formatter: formatType,
        keyHandler: myKeyHandlerI,
        onSelect: function(rec){
        	$("div#block"+num+" input#unit"+code+"Name"+num).val(rec.name);
       }
	});
	if(value!=undefined&&value!=""){
		$("div#block"+num+" input#unit"+code+"Code"+num).combobox("setValue",value);
	}
}
function setDate(code,num,value){
	if(value==null||value==""){
		$("div#block"+num+" input#"+code+"Date"+num).datebox();
	}else{
	$("div#block"+num+" input#"+code+"Date"+num).datebox("setValue",value);
	}
}
function setCharge(code,num,value){
	$("div#block"+num+" input#tel"+code+"No"+num).combobox({
		url: '${appPath}/inCharge/findAll.json',
	    method: 'get',
	    valueField: 'name',
	    textField: 'telNo',
	    panelWidth: 250,
	    panelHeight: 'auto',
	    formatter: formatIC,
	    keyHandler: myKeyHandlerII,
	    onSelect: function(rec){
		    $("div#block"+num+" input#in"+code+"Charge"+num).val(rec.name);
		    $("div#block"+num+" input#section"+code+"Chief"+num).val(rec.sectionChief);
		}
	}).combobox("setValue",value);
}
function setCause(num,value){
	$("div#block"+num+" input#cause"+num).combobox({
		url:'${appPath}/codeCause/find.json',
	    method:'get',
	    valueField:'name',
	    textField:'name',
	    multiline:true,
	    keyHandler: myKeyHandler
	
	}).combobox("setValue",value);
}
function setExaminant(num,value){
	$("div#block"+num+" input#examinant"+num).combobox({
		url:'${appPath}/committee/findCkd.json',
	    method:'get',
	    valueField:'code',
	    textField:'name',
	    multiline:true,
	    multiple:true,
	    keyHandler: myKeyHandler,
	}).combobox("setValues",value.split(','));
}


</script>